<script setup>
import qs from "qs";
import { reactive, ref, watch } from "vue";
import { getUnreadList, setRead, setAllRead } from "@/api/business";
import { Message } from "element-ui";
import store from '@/store'

const propsData = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
});
const emit = defineEmits(["close"]);

const dialogVisible = ref(false);
const tableData = ref([]);
const total = ref(0);
const loading = ref(false);
const params = reactive({
  pageNum: 1,
  pageSize: 10,
});

const getList = async () => {
  loading.value = true;
  const res = await getUnreadList(params);
  tableData.value = res.data.list;
  total.value = res.data.count;
  loading.value = false;
};

watch(
  () => propsData?.visible,
  (val) => {
    dialogVisible.value = val;
    if (val) {
      getList();
    }
  }
);

const indexMethod = (index) => {
  return (params.pageNum - 1) * params.pageSize + index + 1;
};

const handleCurrentChange = (currentPage) => {
  params.pageNum = currentPage;
  getList();
};

const handle = async (row) => {
  try {
    loading.value = true;
    await setRead(row.id);
    if (row.bizType === "UPDATE_DEADLINE_TIME") {
      getList();
      return;
    }

    const params = {
      docNo: row.docNo,
      editContentType: "document",
    };

    if (row.bizType === "DOC_AUDIT") {
      // 去审核
      params.audit = row.bizId
    } else if (row.bizType === "START_COOPERATE") {
      params.userNo = store.state.user.userNo;
      params.collaborate = true;
      params.validToken = "";
    } else if (row.bizType === "FINISH_COOPERATE") {
      params.entry = 'preview'
    }

    const query = qs.stringify(params);
    window.open(`/editor/view?` + query, "_blank");
    await getList();
  } catch (error) {
    console.debug(error);
  } finally {
    loading.value = false;
  }
};
const handleAllRead = async () => {
  try {
    await setAllRead();
    Message.success("操作成功");
    await getList();
  } catch (error) {
    console.debug(error);
  } finally {
    loading.value = false;
  }
};
</script>

<template>
  <el-dialog
    title="消息提醒"
    :visible.sync="dialogVisible"
    width="700px"
    center
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    @close="emit('close')"
    destroy-on-close
  >
    <div class="text-right pr5">
      <el-button size="mini" type="text" @click="handleAllRead"
        >全部已读</el-button
      >
    </div>
    <el-table
      :data="tableData"
      header-row-class-name="header-row"
      class="cutom-table"
    >
      <el-table-column label="" type="index" width="50" :index="indexMethod">
      </el-table-column>
      <el-table-column prop="title" label=""></el-table-column>
      <el-table-column prop="createTime" label="" width="160"></el-table-column>
      <el-table-column
        prop="readFlagName"
        label=""
        width="60"
      ></el-table-column>
      <el-table-column prop="index" label="操作" width="60">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="handle(scope.row)"
            >去处理</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-if="total"
      class="text-right p20"
      layout="prev, pager, next"
      :page-size="10"
      :total="total"
      :current-page.sync="params.pageNum"
      @current-change="handleCurrentChange"
    >
    </el-pagination>
  </el-dialog>
</template>
<style lang="scss" scoped>
.text-right {
  text-align: right;
}
.cutom-table {
  border-top: 1px solid #dfe6ec;
}
::v-deep .header-row {
  display: none;
}
</style>
